<!--
 * @Author: wangshiyang
 * @Date: 2023-06-15 16:08:48
 * @LastEditors: wangshiyang
 * @LastEditTime: 2023-06-15 16:08:51
 * @Description: 请填写简介
-->
<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <!-- 1、导入mapbox的依赖 js+css -->
      <script src='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js'></script>
      <link href='https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css' rel='stylesheet' />
      <script src='https://lib.baomitu.com/jquery/3.6.3/jquery.min.js'></script>

      <style>
            * {
                  margin: 0;
                  padding: 0
            }

            #map {
                  width: 100vw;
                  height: 100vh;
            }

            #select {
                  position: absolute;
                  z-index: 100;
                  left: 10;
                  top: 10;
            }
      </style>
</head>

<body>
      <select id="select" name="projection">
            <option value="mercator">Mercator</option>
            <option value="globe">Globe</option>
            <option value="albers">Albers</option>
            <option value="equalEarth">Equal Earth</option>
            <option value="equirectangular">Equirectangular</option>
            <option value="lambertConformalConic" selected="">
                  Lambert Conformal Conic
            </option>
            <option value="naturalEarth">Natural Earth</option>
            <option value="winkelTripel">Winkel Tripel</option>
      </select>
      <!-- 2、设置地图容器的挂载点 -->
      <div id="map">

      </div>
      <script>
            /* 3、实例化地图 */
            mapboxgl.accessToken = 'pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA';
            const map = new mapboxgl.Map({
                  /* 将地图挂载到对应的DOM上 相当于ol的target */
                  container: "map",
                  /* 相当于ol的layers */
                  style: {
                        "version": 8,
                        "sources": {
                              "raster-tiles": {
                                    "type": "raster",
                                    "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
                                    "tileSize": 256
                              }
                        },
                        "layers": [{
                              "id": "simple-tiles",
                              "type": "raster",
                              "source": "raster-tiles",
                              "minzoom": 0,
                              "maxzoom": 22
                        }]
                  },
                  center: [114.30, 30.50],
                  zoom: 3
            })
            /* 定制化背景 */
            map.on("style.load", () => {
                  map.setFog({

                  })

            })
            $("#select").change((e) => {
                  const value = e.target.value;
                  map.setProjection({
                        name: value
                  });
            })
      </script>
</body>

</html>